import React, { memo, useState } from 'react';
import { Form, Modal, message } from 'antd';
import { keyBy } from 'lodash';

import LimitInput from '@/components/LimitInput';
import { onSaveFeedback } from '@/services/salaryManage/salaryConfirm';
import BoxInput from '@/pages/SalaryManage/components/BoxInput';
import styles from '../../index.less';

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
    }
};
const FeedBackModal = ({ visible = false, form, onSetVisible = () => {}, date, dataList = [] }) => {
    const { getFieldDecorator, validateFields } = form;
    const [loading, setLoading] = useState(false);
    const handleOk = () => {
        try {
            validateFields(async (error, formValues) => {
                console.log(error, formValues);
                if (!error) {
                    const { feedbackItemDTOs: feedbackItemList, ...otherFormValues } = formValues;
                    if (!feedbackItemList || !feedbackItemList.length) {
                        message.error('提交失败，未勾选任何薪资项');
                        return;
                    }

                    const dataListMap = keyBy(dataList, 'key');
                    // 添加薪资项名称（feedbackItemList中没有薪资项名称）
                    const feedbackItemDTOs = feedbackItemList.map(feedbackItem => ({
                        ...feedbackItem,
                        salaryItemName: dataListMap[feedbackItem.salaryItemId].title
                    }));
                    const postData = {
                        date,
                        ...otherFormValues,
                        feedbackItemDTOs
                    };

                    setLoading(true);
                    const { code, msg } = await onSaveFeedback(postData);
                    if (code === 10000) {
                        message.success('异常反馈成功，请在反馈记录中查看');
                        // 重置，防止下次进来带同样的值
                        form.resetFields();
                        onSetVisible(false);
                    } else {
                        message.error(msg);
                    }
                    setLoading(false);
                }
            });
        } catch (e) {
            console.log(e);
            setLoading(false);
        }
    };
    return (
        <Modal
            title="异常反馈"
            visible={visible}
            width={640}
            confirmLoading={loading}
            className={styles.feedbackFormModal}
            onOk={handleOk}
            onCancel={() => {
                onSetVisible(false);
            }}
            destroyOnClose
        >
            <Form {...formItemLayout}>
                <Form.Item label="计薪月份">
                    <span>{date}</span>
                </Form.Item>
                {dataList.length ? (
                    <Form.Item label="薪资细项" required style={{ marginBottom: 0 }}>
                        {/* eslint-disable-next-line no-return-assign */}
                        <BoxInput
                            dataList={dataList}
                            date={date}
                            form={form}
                            itemField="feedbackItemDTOs"
                            checkKey="salaryItemId"
                            inputKey="content"
                            validateTitle="异常原因"
                            placeholder="请输入异常原因"
                        />
                    </Form.Item>
                ) : null}
                <Form.Item label="补充说明">
                    {getFieldDecorator('content', {
                        initialValue: '',
                        rules: [
                            {
                                max: 500,
                                message: '补充说明不能超过500个字符'
                            }
                        ]
                    })(
                        <LimitInput
                            placeholder="补充说明..."
                            autoSize={{ minRows: 4, maxRows: 4 }}
                            maxLength={500}
                            area
                            showNumber
                        />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
};
export default memo(Form.create({ name: 'feedBackModal' })(FeedBackModal));
